<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络聊天室</title>
</head>
<style>
    #contains{
        background-color: pink;
        width: 1000px;
        height: 700px;
        margin: auto;
    }
    #username{
        background-color: powderblue;
        width: 1000px;
        height: 30px;
    }
    #Inchat{
        background-color: rgb(5, 130, 146);
        width: 1000px;
        height: 30px;
    }
    #left{
        background-color: salmon;
        width: 700px;
        height: 640px;
        float: left;
        position: relative;
    }
    #content{
        background-color: silver;
        width: 700px;
        height: 400px;
        /*display: none;*/
        visibility: hidden;
    }
    #right{
        background-color: rgb(107, 3, 3);
        width: 300px;
        height: 640px;
        float: right;
    }
    #hyList{
        height: 270px;
        overflow-y: scroll;
        background: antiquewhite;
    }
    #xtList{
        height: 270px;
        overflow-y: scroll;
        background: antiquewhite;
    }
    #input{
        margin-bottom: 0px;
        position: absolute;
        bottom: 0px;
    }
    #mes_left{
        float: left;
        border: 2px aqua;
        max-width: 490px;
    }
    #mes_right{
        float: right;
        border: 2px aqua;
        max-width: 490px;
    }
    #hy{
        display: block;
        width: 300px;
    }
    textarea {
        resize: none;
        border: none;
        outline: none
    }
</style>
<body>
<div id = "contains">
    <div id="username"><h3 style="text-align: center;" id="myname"><span>-在线</span></h3></div>
    <div id="Inchat"></div>
    <div id="left">
        <div id="content">

        </div>
        <div id="input">
            <textarea type="text" id="input_text" style="width: 695px;height: 200px;"></textarea>
            <button id="submit" style="float: right;">发送</button>
            <button id="huan" style="float: right;">切换</button>
        </div>
    </div>
    <div id="right">
        <p id="hy" style="text-align: center;">好友列表</p>
        <div id="hyList">

        </div>
        <p id="xt" style="text-align: center">系统消息</p>
        <div id="xtList">

        </div>
    </div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    var toName;
    var username;
    var statuss;
    //点击好友名称展示相关消息
    function showChat(name){
        toName = name;
        //现在聊天框
        $("#content").html("");
        $("#content").css("visibility","visible");
        $("#Inchat").html("当前正与"+toName+"聊天");
        //从sessionStorage中获取历史信息
        var chatData = sessionStorage.getItem(toName);
        if (chatData != null){
            $("#content").html(chatData);
        }
        var showcontent=sessionStorage.getItem(toName)
        if (showcontent!=null){
            $("#content").html(showcontent)
        }
    }
    $(function () {
        $.ajax({
            url:"getUsername",
            success:function (res) {
                username = res;
            },
            async:false //同步请求，只有上面好了才会接着下面
        });
        $.ajax({
            url:"getStuats",
            success:function (res) {
                statuss = res;
            },
            async:false //同步请求，只有上面好了才会接着下面
        });
        var webSocket=new WebSocket("ws://localhost:15000/char");
        //用于建立连接
        webSocket.onopen=function () {
            $("#username").html("<h3 style=\"text-align: center;\">用户："+ username +"<span>-在线</span></h3>");
        }
        //连接之后给服务端推送的数据
        webSocket.onmessage=function (evt) {
            //字符串
            var aaa=evt.data
            //对象
            var content=JSON.parse(aaa)
            //如果这个为true说明为是个集合(也就是系统消息)
            if (content.system){
                //获取推送过来的数据
                var names=""
                if (statuss=="user"&&content.status=="agent"){
                    names=content.message
                }
                if (statuss=="agent"&&content.status=="user"){
                    names=content.messages
                }
                var hyLists=""
                var xtLists=""
                if (names!=""){
                    for (var name of names){
                        if (name!=username){
                            hyLists+="<li><a onclick='showChat(\""+name+"\")'>"+name+"</a></li>"
                            xtLists+="<li style='color: red'>您的好友:"+name+"已上线</li>"
                        }
                    }
                }

                if (statuss=="user"&&content.status=="agent"){
                    $("#hyList").html(hyLists)
                    $("#xtList").html(xtLists)
                }
                if (statuss=="agent"&&content.status=="user"){
                    $("#hyList").html(hyLists)
                    $("#xtList").html(xtLists)
                }

            }
            if (!content.system){
                var duicontent="<div class='msg guest'><div class='msg-left'><div class='msg-host handDefault'></div><div class='msg-ball'>"+content.message+"</div></div></div>"
                //对方的名称必须等于发送过来的对方名称(防止跟别人聊天也在页面添加)
                if (toName==content.fromName){
                    $("#content").append(duicontent)
                }
                //进行数据添加
                var showcontent=sessionStorage.getItem(content.fromName)
                if (showcontent!=null){
                    duicontent=showcontent+duicontent
                }
                sessionStorage.setItem(content.fromName,duicontent)
            }
        }
        webSocket.onclose=function () {


        }
        $("#submit").click(function () {
            var texts=$("#input_text").val()
            $("#input_text").val("")
            var jsons={"toName":toName,"message":texts}
            var mycontent="<div class='msg guest'><div class='msg-right'><div class='msg-host handDefault'></div><div class='msg-ball'>"+texts+"</div></div></div>"
            $("#content").append(mycontent)
            //进行数据添加
            var showcontent=sessionStorage.getItem(toName)
            if (showcontent!=null){
                mycontent=showcontent+mycontent
            }
            sessionStorage.setItem(toName,mycontent)
            var sss=JSON.stringify(jsons)
            webSocket.send(sss)
        })

    })
</script>


</html>